<div class="file-all">
  <div class="head">
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" (click)="revert()"
            [disabled]="currentObj.id==''">
      <i nz-icon nzType="rollback" nzTheme="outline"></i>
      <span>返回上级</span>
    </button>
  </div>
  <div class="label">
    <nz-breadcrumb nzSeparator=">">
      <nz-breadcrumb-item (click)="label({id:''},0)">
        <a>全部文件</a>
      </nz-breadcrumb-item>
      <ng-container *ngFor="let data of labelModel;let i=index">
        <ng-container *ngIf="i!=labelModel.length-1">
          <nz-breadcrumb-item (click)="label(data,i)">
            <a>{{data.name}}</a>
          </nz-breadcrumb-item>
        </ng-container>
        <ng-container *ngIf="i==labelModel.length-1">
          <nz-breadcrumb-item>
            {{data.name}}
          </nz-breadcrumb-item>
        </ng-container>
      </ng-container>
    </nz-breadcrumb>
  </div>
  <div class="content">
    <nz-table #dataTable [nzPageSize]="100000000" [nzData]="tableModel" [nzShowPagination]="false" nzSize="small">
      <thead (nzSortChange)="sort($event,name,updateTime)" nzSingleSort>
      <tr class="thead-tr">
        <th nzShowCheckbox [(nzChecked)]="isAllChecked" (nzCheckedChange)="checkAll()" class="th-td-1">
        </th>
        <th nzShowSort nzSortKey="name" class="th-td-5" #name>名称</th>
        <th nzShowSort nzSortKey="updateTime" class="th-td-4" #updateTime>修改日期</th>
        <th class="th-td-2">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of dataTable.data" (click)="trClick($event,data)">
        <td nzShowCheckbox [(nzChecked)]="checkedModel[data.id]" (nzCheckedChange)="checkboxChoice(data)"
            class="th-td-1">
          <i *ngIf="!data['isFile']" nz-icon nzType="folder" nzTheme="outline"></i>
          <i *ngIf="data['isFile']" nz-icon nzType="file" nzTheme="outline"></i>
        </td>
        <td class="th-td-5" title="{{data.name}}">{{ data.name }}</td>
        <td class="th-td-4">{{ data['updateTime'] | date:'yyyy-MM-dd hh:mm:ss'}}</td>
        <td class="th-td-2">
          <ng-container *ngIf="data['isFile']">
            <a target="_blank" style="display: inline-block" (click)="downloadFile(data['id'])">下载</a>
            <ng-container *ngIf="getSuffix(data.name)==='.mp4'">
              <a style="margin-left: 5px;display: inline-block" (click)="videoPlay(data['id'])">播放</a>
            </ng-container>
            <ng-container *ngIf="getSuffix(data.name)==='.mp3'">
              <a style="margin-left: 5px;display: inline-block" (click)="videoMusic(data['id'])">播放</a>
            </ng-container>
            <ng-container
              *ngIf="getSuffix(data.name)==='.jpg'||getSuffix(data.name)==='.png'||getSuffix(data.name)==='.jpeg'||getSuffix(data.name)==='.gif'">
              <a style="margin-left: 5px;display: inline-block" (click)="openPicture(data['id'])">打开</a>
            </ng-container>
          </ng-container>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div class='footer'>
    <div class='footer-head'>精彩电影推荐</div>
    <div class='footer-content'>
      <div class='footer-content__play'>
        <ng-container *ngFor="let item of movieData">
          <img class='recommend-element' src="{{item.path}}" alt="加载失败" (click)="playMovie(item.origin)"/>
        </ng-container>
      </div>
    </div>
  </div>
</div>

<!-- 提取码-->
<nz-modal [(nzVisible)]="isDrawCodeVisible" nzTitle="提取码" (nzOnCancel)="isDrawCodeVisible = false"
          (nzOnOk)="verifyDrawCode()">
  <nz-form-item>
    <nz-form-label nzRequired>提取码</nz-form-label>
    <nz-form-control nzErrorTip='提取码，不能为空'>
      <input nz-input placeholder="提取码" [(ngModel)]="drawCode"/>
    </nz-form-control>
  </nz-form-item>
</nz-modal>

<div class='video-play' *ngIf="showVideoPlay" (click)='closeMovie()'>
  <video src="{{videoUrl}}" autoplay controls="controls" class="video" id='videoPlayer'>
    您的浏览器不支持 video 标签。
  </video>
</div>
<div class='video-play' *ngIf="showMusicPlay" (click)='closeMusic()'>
  <audio src="{{musicUrl}}" autoplay controls="controls" class="video" id='musicPlay'>
    您的浏览器不支持 audio 标签。
  </audio>
</div>
<div class='video-play' *ngIf="picturePlay" (click)='closePicture()'>
  <img src="{{pictureUrl}}" class="video"/>
</div>
